import React, { Component } from "react"
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons'
import { Button, Menu } from 'antd'
import { withRouter } from 'react-router-dom'

class AntdMenu extends Component {

  state = {
    collapsed: false,
    items: [
      { key: '/about', label: 'About' },
      { key: '/home', label: 'Home' }
    ],
    selectedKeys: ['/about']
  }

  componentDidMount() {
    if (this.props.location.pathname) {
      this.setState({
        selectedKeys: [this.props.location.pathname]
      })
    }
  }

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed
    })
  }
  onClick = (e) => {
    this.setState({
      selectedKeys: [e.key]
    })
    this.props.history.push(e.key)
  }
  render() {
    const { collapsed, items, selectedKeys } = this.state
    return (
      <div style={{ width: 256 }}>
        <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
        <Menu
          selectedKeys={selectedKeys}
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
          items={items}
          onClick={this.onClick}
        />
      </div>
    )
  }
}

export default withRouter(AntdMenu);